<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header">
    <link href="/css/phone/mui.ttf" th:href="@{/css/phone/mui.ttf}">
    <link href="css/phone/mui.css">
</head>

<!--追加样式-->
<style>
    body{
        background-color: #fff;
    }
    .mui-content{
        background-color: #fff;
    }
    li {
        float: left;
    }
    .nav-bar.fixed {
        position: fixed;
        top: 0;
    }
    .nav-bar {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 50px;
        z-index: 99;
        background-color: rgba(255,255,255,1);}
    .nav-bar ul li{
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .nav-bar ul li h2{
        height: 50px;
        line-height: 50px;
    }
</style>
<body>

<div class="mui-content">
    <div class="nav-bar nav-index fixed">
        <ul class="mui-table-view">
            <li class=" mui-col-xs-2" onclick="javascript:history.go(-1);">
                <a>返回</a>
            </li>
            <li class=" mui-col-xs-8" >
                <h2 th:text="${title}"> 图书分类</h2>
            </li>
            <li class=" mui-col-xs-2">
                <a href="">搜索</a>
            </li>
        </ul>
    </div>

    <div class="mui-input-row mui-search" style="margin-top: 50px">
        <input type="search" class="mui-input-clear" placeholder="">
    </div>
    <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media " th:each="fenlei:${booksDOList}"  >
                <a th:href="'/iphone/bookinfo/'+${fenlei.bookId}">
                    <img class=" mui-pull-left"  th:src="${fenlei.bookImg}" style="width: 80px;height: 80px">
                    <div class="mui-media-body">


                        <div   style="color: #333;
                            font-size: 17px;
                            font-family: 宋体;
                            margin: 5px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            width: 240px" th:text="${fenlei.bookName}">西游记</div>
                        <div   style="color: #333;font-size: 12px;margin: 5px" th:text="${fenlei.author}">吴承恩</div>
                        <div class="mui-ellipsis-2"  style="
                            color: #999;
                            font-size: 10px;
                            margin: 5px;" th:text="${fenlei.appear}" >
                            能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？
                            能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？
                            能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media" th:attr="hidden=(${booksDOList==null} ? false:true)">
                <div class="content">
                    书架上空空如也！
                </div>
            </li>
        </ul>
    </div>

</div>

</body>
<!--JS-->
<div th:include="include :: footer"></div>
<script src="/js/phone/mui.min.js"></script>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    mui('body').on('tap', 'a', function() {
        document.location.href = this.href;
    });
</script>

</html>`